<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>d3操作svg</title>
    <script src="./js/d3.v3.min.js"></script>
    <style>
        svg{
            border: 1px solid #333;
        }
    </style>
    <script>
        window.onload = () => {
            // 添加svg元素
            var svg = d3.select('body').append('svg')
                            .attr('width', 600)
                            .attr('height', 400);

            var distanceX = 100;

            // 添加分组并移动
            // var g = svg.append('g').attr('transform', 'translate('+distanceX+', 0)')
            var g = svg.append('g').attr('transform', `translate(${distanceX}, 0)`)

            // 分组里边添加rect
            g.append('rect')
                .attr('x', 100)
                .attr('y', 100)
                .attr('fill', 'red')
                .attr('stroke', 'blue')
                .attr('stroke-width', 10)
                .attr('width', 100)
                .attr('height', 100)

            // 分组里边添加circle
            g.append('circle')
                .attr('cx',150)
                .attr('cy',300)
                .attr('r',50)
                .attr('fill', 'green')
                .attr('fill', 'none')
                .attr('fill', 'transparent')
                .attr('stroke', 'red')
        }
    </script>
</head>
<body>
</body>
</html> 